import React, { memo, useState } from 'react'
import { PictureWrapper } from './style'
import { shallowEqual, useSelector } from 'react-redux'
import PictureBrowser from '@/components/picture-browser'

const DetailPictures = memo(() => {
  const [showBrowser, setShowBrowser] = useState(false)

  const { detailInfo } = useSelector((state) => {
    return {
      detailInfo: state.detail.detailInfo,
    }
  }, shallowEqual)

  return (
    <PictureWrapper>
      <div className="pictures">
        <div className="left">
          <div className="item" onClick={() => setShowBrowser(true)}>
            <img src={detailInfo?.picture_urls?.[0]} alt="" />
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {detailInfo.picture_urls?.slice(1, 5).map((item) => {
            return (
              <div className="item" key={item} onClick={() => setShowBrowser(true)}>
                <img src={item} alt="" />
                <div className="cover"></div>
              </div>
            )
          })}
        </div>
      </div>
      <div className="show-btn" onClick={() => setShowBrowser(true)}>
        显示照片
      </div>
      {/* 图片浏览器 */}
      {showBrowser && <PictureBrowser pictureUrls={detailInfo.picture_urls} closeClick={() => setShowBrowser(false)} />}
    </PictureWrapper>
  )
})

export default DetailPictures
